<template>
  <view class="contents">
    <view class="title">
      {{ data.name }}
      <!-- <u-icon class='iconleft' name="arrow-right-double" size="28"></u-icon> -->
      <view
        class="iconleft"
        style="color: #09bb07"
      >
        <!-- <text style="margin-right:10rpx;"> -->
      </view>
    </view>
    <view class="lineInCard"> </view>
    <view class="detail">
      <view class=""> 视频大小：{{ data.size }} </view>
      <!-- <view class=""> 所在地区：{{ data.position }} </view> -->
      <view class=""> 缓存时间：{{ data.createTime }} </view>
      <!-- <view class=""> 结束时间：{{ data.endTime }} </view> -->
      <!-- <view class=""> 点检人：{{ data.nickName }} </view> -->
    </view>
    <view class="box-bottom">
      <u-button
        size="medium "
        type="success"
        shape="circle"
        @click="handleVideo(data)"
      >播放</u-button>
      <u-button
        size="medium "
        type="default"
        shape="circle"
        @click="handleDelete(data)"
      >删除</u-button>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: 0
    }
  },
  data() {
    return {};
  },
  methods: {
    handleVideo(data) {
      uni.navigateTo({
        url: "/pages/video/video?data=" + JSON.stringify(data)
      });
    },
    handleDelete(item) {
      let that = this;
      let cacheList = uni.getStorageSync("cacheList");
      // 删除视频
      uni.removeSavedFile({
        filePath: item.filePath,
        complete: function(res) {
          cacheList.forEach((val, index) => {
            if (val.filePath === item.filePath) {
              cacheList.splice(index, 1);
              uni.setStorageSync("cacheList", cacheList);
              that.$emit("update");
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.contents {
  margin-bottom: 20rpx;
  background-color: white;
  padding: 20rpx 40rpx;

  .title {
    font-size: 34rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
    .iconleft {
      float: right;
      font-weight: 500;
      margin-top: 4rpx;
    }
  }

  .detail {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 36rpx;
    margin: 0px 30rpx 0px 0px;
    color: #666;
  }

  .bottom {
    padding-top: 10rpx;
    color: #111;
  }
}
.box-bottom {
  width: 100%;
  display: flex;
}
</style>
